<template>
  <div class="box">
    <input type="text" placeholder="用户名/邮箱/已验证手机" class="inpleft" />
    <span class="iconfont icon icon-delete"  ></span>
    <div class="mima">
      <input type="password"  placeholder="请输入密码" class="inpright" ref="inputpass">
      <i class="icon iconfont icon-no_eye" v-if="noeye" @click="change()"></i>
      <i class="icon iconfont icon-eye" v-else   @click="change()"></i> 
      <span class="forget">忘记密码</span>
    </div>
    <div class="errbox">密码错误</div>
    <div class="login-btn"><button class="btn">登录</button></div>
    <div class="zhuche">快速注册</div>
    <div class="otherlogin">
      <div class="other-head">——————— 其他方式登陆 ———————</div>
      <div class="othercon">
        <div class="login-tx">
          <span class="iconfont icon icon-shejiaotubiao-39 tx"></span
          ><span class="qq">QQ</span>
        </div>
        <div class="login-tx">
          <span class="iconfont icon icon-wechat tx"></span
          ><span class="qq">微信</span>
        </div>
      </div>
    </div>
    <div class="roul">登录即代表您同意<span>知心购隐私政策</span></div>
  </div>
</template>

<script>

export default {
  data() { 
    
    return {
     noeye:true,
     del:true
    };
  },
  components: {},
  methods: {
    change(){
     this.noeye = !this.noeye
        if(this.noeye){
         
          this.$refs.inputpass.type = "password"
        }
        else{
          this.$refs.inputpass.type = "text"
        }
      },
      
      }
    }


</script>

<style lang="scss" scoped>
@import  '../../common/style/mixin.scss';
.box {
  margin-top: 75px;
  width: 100%;
  // text-align: center;
}
.inpleft {
  width: 80%;
  height: 30px;
  padding: 10px 0;
  border: none;
  border-bottom: solid 1px #dcdcdc;
  margin-top: 15px;
  margin-left: 18px;
}

.icon-delete{
  display: inline-block;
  height: 30px;
  padding: 10px 0;
  line-height: 30px;
  width: 10%;
 border-bottom: solid 1px #dcdcdc;
}

.inpright {
  // width: 90%;
  height: 30px;
  padding: 10px 0;
  border: none;
  // border-bottom: solid 1px #dcdcdc;
  margin-top: 15px;
}

.mima {
  border-bottom: solid 1px #dcdcdc;
  margin: 0 18px;
}

.forget {
  margin-left: 10px;
  border-left: solid 1px #dcdcdc;
  padding: 10px;
}

.errbox {
  height: 20px;
  width: 50%;
  padding: 15px 0;
  margin-left: 18px;
  color: #f63515;
  font-size: 13px;
}

.login-btn {
  text-align: center;
}

.btn {
  width: 80%;
  height: 50px;
  // margin: 0 40px;
  border: none;
  margin-left: 18px;
  background-color: #f63515;
  border-radius: 25px;
  color: white;
}
.zhuche {
  width: 80%;
  margin-top: 15px;
  text-align: right;
  margin-left: 43px;
  color: #a39c9c;
}
.otherlogin {
  margin-top: 50px;
  text-align: center;
}

.other-head {
  color: #dcdcdc;
}

.othercon {
  width: 160px;
  height: 74px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.tx {
  display: inline-block;
  height: 50px;
  width: 50px;
  font-size: 50px;
  margin-top: 20px;
}
.icon-shejiaotubiao-39 {
  color: skyblue;
}

.icon-wechat {
  color: rgb(105, 187, 100);
  //   margin-left: 30px;
}

.login-tx {
    display: flex;
  width: 80px;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.qq{
    padding-top: 10px; 
}

.roul{
    margin-top: 60px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

.roul span{
    color:rgb(29, 164, 218)
}
</style>
